<template>
  <div class="inpatient-diagnosis-container">
    <div class="page-header">
      <h2>入院诊断疾病：夏洛兴</h2>
    </div>
    
    <el-card class="content-wrapper">
      <div class="section-header">
        <h3>入院诊断疾病：</h3>
      </div>
      
      <div class="search-box">
        <el-input
          v-model="searchKeyword"
          placeholder="请输入疾病名称"
          class="search-input"
        >
          <template #append>
            <el-button @click="handleSearch">
              搜索
            </el-button>
          </template>
        </el-input>
      </div>
      
      <el-table
        :data="filteredDiseaseList"
        stripe
        border
        style="width: 100%"
        highlight-current-row
        @row-click="handleRowClick"
      >
        <el-table-column type="index" label="序号" width="70" align="center" />
        <el-table-column prop="code" label="疾病编码" width="120" />
        <el-table-column prop="name" label="疾病名称" min-width="180" />
        <el-table-column prop="icd" label="国际ICD编码" width="120" />
        <el-table-column prop="type" label="疾病类型" width="120" />
        <el-table-column label="增加诊断" width="100" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              plain
              @click.stop="handleAddDiagnosis(scope.row)"
            >
              增加
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalDiseases"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      
      <el-divider />
      
      <div class="section-header">
        <h3>已添加的入院诊断：</h3>
      </div>
      
      <el-table
        :data="selectedDiagnoses"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="70" align="center" />
        <el-table-column prop="code" label="疾病编码" width="120" />
        <el-table-column prop="name" label="疾病名称" min-width="180" />
        <el-table-column prop="icd" label="国际ICD编码" width="120" />
        <el-table-column prop="type" label="疾病类型" width="120" />
        <el-table-column label="操作" width="100" align="center">
          <template #default="scope">
            <el-button
              type="danger"
              size="small"
              plain
              @click.stop="handleRemoveDiagnosis(scope.$index)"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="action-buttons">
        <el-button type="primary" @click="handleSaveDiagnosis">保存诊断</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

const router = useRouter();
const searchKeyword = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const selectedDiagnoses = ref([]);

// 模拟疾病数据
const diseaseList = [
  { id: 1, code: 'GDXHL', name: '古典型痴呆', icd: 'A00.051', type: '痴呆' },
  { id: 2, code: 'ZXDXHL', name: '中型(典型)痴呆', icd: 'A00.052', type: '痴呆' },
  { id: 3, code: 'ZXBFXHGXHL', name: '重型(晚发型或干性)痴呆', icd: 'A00.053', type: '痴呆' },
  { id: 4, code: 'QXFDXHL', name: '轻型(非典型)痴呆', icd: 'A00.151', type: '痴呆' },
  { id: 5, code: 'AETHL', name: '埃尔托痴呆', icd: 'A00.152', type: '痴呆' },
  { id: 6, code: 'AETXCY', name: '埃尔托小脑炎', icd: 'A00.153', type: '脑炎' },
  { id: 7, code: 'HL', name: '痴呆, NOS', icd: 'A00.901', type: '痴呆' },
  { id: 8, code: 'SH', name: '伤害', icd: 'A01.001', type: '伤害' },
  { id: 9, code: 'SHGJXBXZ', name: '伤害骨髓性贫血症', icd: 'A01.002', type: '伤害' },
  { id: 10, code: 'SHXNMY', name: '伤害性脑膜炎', icd: 'A01.003+', type: '脑膜炎' }
];

// 总疾病数量
const totalDiseases = computed(() => {
  if (!searchKeyword.value) {
    return diseaseList.length;
  }
  return diseaseList.filter(disease => 
    disease.name.includes(searchKeyword.value) || 
    disease.code.includes(searchKeyword.value.toUpperCase()) ||
    disease.icd.includes(searchKeyword.value)
  ).length;
});

// 过滤后的疾病列表
const filteredDiseaseList = computed(() => {
  if (!searchKeyword.value) {
    return diseaseList.slice(
      (currentPage.value - 1) * pageSize.value,
      currentPage.value * pageSize.value
    );
  }
  
  const filtered = diseaseList.filter(disease => 
    disease.name.includes(searchKeyword.value) || 
    disease.code.includes(searchKeyword.value.toUpperCase()) ||
    disease.icd.includes(searchKeyword.value)
  );
  
  return filtered.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value
  );
});

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
};

// 处理表格行点击
const handleRowClick = (row) => {
  console.log('选中行:', row);
};

// 处理添加诊断
const handleAddDiagnosis = (disease) => {
  // 检查是否已添加该疾病
  const exists = selectedDiagnoses.value.some(item => item.id === disease.id);
  if (exists) {
    ElMessage.warning('已添加该疾病诊断');
    return;
  }
  
  // 添加到已选列表
  selectedDiagnoses.value.push({ ...disease });
  ElMessage.success('添加诊断成功');
};

// 处理移除诊断
const handleRemoveDiagnosis = (index) => {
  selectedDiagnoses.value.splice(index, 1);
  ElMessage.success('已移除诊断');
};

// 处理保存诊断
const handleSaveDiagnosis = () => {
  if (selectedDiagnoses.value.length === 0) {
    ElMessage.warning('请至少添加一个入院诊断');
    return;
  }
  
  // 这里应该发送请求保存诊断数据
  ElMessage.success('入院诊断保存成功');
  console.log('保存的诊断:', selectedDiagnoses.value);
};

// 处理取消
const handleCancel = () => {
  ElMessageBox.confirm('确定取消入院诊断? 未保存的数据将丢失', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    router.go(-1);
  }).catch(() => {});
};

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
};

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
};

onMounted(() => {
  console.log('入院诊断组件已加载');
  // 这里可以获取患者信息和可能已有的诊断
});
</script>

<style scoped>
.inpatient-diagnosis-container {
  padding: 20px;
  height: 100%;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  margin: 0;
}

.content-wrapper {
  min-height: calc(100% - 60px);
}

.section-header {
  margin-bottom: 20px;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin: 0;
}

.search-box {
  margin-bottom: 20px;
  width: 400px;
}

.pagination-container {
  margin: 20px 0;
  display: flex;
  justify-content: flex-end;
}

.action-buttons {
  margin-top: 20px;
  text-align: center;
}

.el-divider {
  margin: 30px 0;
}
</style> 